

// import data from "../data"
// console.log(data)
import {observer,inject} from "mobx-react"

@inject('data','user')  // inject 注入数据 
@observer
export class MyCount extends Component{
  componentDidMount(){
     this.props.data.changeMove()
  }
  render(){
    console.log(this.props)
    const {
      userInfo 
    }  = this.props.user;
    const {
      newCount,
      count ,
      countAdd ,
      countDesc ,
      changeCount,
      
      city, 
      changeCity,
      changeWord,
      word,
      flag,
      changeFlag,
      mydata,
      changeText,
      changeNewCount,
      changeMove,
      
    } = this.props.data; 
    return (
      <div>
        <div>
          {
            flag&&<div>
               <h2> Mobx 实现简单的 计数器  </h2>
               <h2>userInfo  -- {userInfo.get("username")} </h2>
              <h2>count -- {count} </h2>
              <h2 onClick={()=>changeNewCount(2000)}>newCount -- {newCount}</h2>
              <h2>city -- {city} </h2>
              <h1>word -== {word}</h1>
              <h2>text==  {mydata.get('text')} </h2>
            </div>
          }
        </div>

        <button onClick={countAdd } >点击修改 count  add</button>
        <button onClick={countDesc } >点击修改 count  desc  </button>
        <button onClick={ ()=>changeCount(100) } >点击修改 count  100  </button>
        <p>
          <button onClick={()=>changeCity('深圳广州东莞')}>change city </button>
        </p>
        <p>
          <input type="text" value={word} ref={el=>this.inp=el} onChange={()=>changeWord(this.inp.value)}/>
        </p>
        <p>
          <button  onClick={changeFlag}> 点击修改flag </button>
        </p>
        <p>
          <button  onClick={changeText}> 点击修改 text async  </button>
        </p>
        <div>
          {
            mydata.get('movie').map((l,i)=>{
              return (
                <p key={i}>
                  {l.title}
                </p>
              )
            })
          }
        </div>
      </div>
    )
  }
}
